<template>
	<!--当前界面为uni扩展navbar-->
	<view class="comp-base-navbar-box" @click="_click">
		<view>
			<uni-nav-bar color="#ffffff" v-if="showNavbar" :fixed="true" :statusBar="true"
				:title="title" :leftIcon="routeLen > 1 ? 'left' : 'home-filled'" @clickLeft="_clickLeft">
				<!--<block slot="left" v-if="isShowBack">
					<uni-icons type="left" size="22" color="#ffffff" @click.native="mxNavigateToOrBack"></uni-icons>
				</block>-->
				<!-- #ifndef MP-WEIXIN -->
				<block slot="right">
					<uni-icons type="more-filled" size="22" color="#ffffff" @click.native.stop="_showOrHide"></uni-icons>
				</block>
				<!-- #endif -->
			</uni-nav-bar>
		</view>
		<view class="navbar-list" v-if="isShowList">
			<uni-list>
				<uni-list-item @click.native.stop="_refresh">
					<block slot="header"><uni-icons class="mrgr5" type="refreshempty" size="18"></uni-icons>刷新页面</block>
				</uni-list-item>
				<uni-list-item @click.native="_updatePassword">
					<block slot="header"><uni-icons class="mrgr5" type="locked" size="18"></uni-icons>修改密码</block>
				</uni-list-item>
				<uni-list-item @click.native="_loginout">
					<block slot="header"><uni-icons class="mrgr5" type="undo" size="18"></uni-icons>退出登录</block>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		name: "c-base-navbar",
		props: {
			showNavbar: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				isShowList: false
			}
		},
		computed: {
			routeLen() {
				let currentRoutes = getCurrentPages()
				return currentRoutes && currentRoutes.length || 0
			}
		},
		mounted() {
			// mxConfigs.js统一配置的名称
			uni.$on(this.mxBaseNavBarList, (res) => {
				this.isShowList = res
			})
		},
		methods: {
			_refresh() {
				console.log(333)
			},
			_updatePassword() {
				console.log(444)
			},
			_loginout() {
				console.log(555)
			},
			_clickLeft() {
				// 需要显示返回的地方才执行返回
				if (this.routeLen > 1) {
					this.mxNavigateToOrBack()
				} else {
					this.mxSwitchTab("/pages/index/index")
				}
			},
			_click() {
				// 组件任何地方点击，非“...”按钮点击
				this.isShowList = false
			},
			_showOrHide() {
				this.isShowList = !this.isShowList
			}
		}
	}
</script>

<style scoped lang="scss">
	.comp-base-navbar-box {
		/deep/ .uni-navbar__content {
			.uni-navbar__header {
				background-image: linear-gradient(45deg,#0081ff,#1cbbb4);
			}
			.uni-nav-bar-text {
				font-size: $c-base-f15;
			}
		}
		/deep/ .navbar-list {
			position: fixed;
			right: 2px;
			z-index: 9999999;
			border: 1px solid $c-base-Gainsboro;
			.uni-list-item__container {
				font-size: $c-base-f14;
			}
		}
	}
</style>
